/**
 * Created by liujiangyi on 2017/8/28.
 */
new Vue(
    {
        el: '#app',
        data: {
            DirItems: [
                //{name: "购房", ItemSelected: "false"},
                //{name: "工具", ItemSelected: "false"},
                //{name: "前端", ItemSelected: "false"}
            ],
            BookMarksList: [
                //{name: "百度", link: "https://www.baidu.com"},
                //{name: "新浪", link: "https://www.baidu.com"},
                //{name: "搜狐", link: "https://www.baidu.com"}
            ],
            xhttp: "",
            selectedParentDir: "",
            newDirName: "",
            newBookMarkName:"",
            newBookMarkDir:"",
            newBookMarkLink:""
        },
        mounted: function () {
            var self = this;
            this.xhttp = new XMLHttpRequest();
            this.xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    self.parseServerCmd(JSON.parse(this.responseText));
                }
            };
            this.clearAddDirData();
            this.sendQueryDirInfoCmd();
            this.sendQueryBookMarkInfoCmd();
            //this.debugInit();
        },
        methods: {
            addNewBookMark:function () {
                //console.log(this.newBookMarkName);
                var newInserRecord;
                if (this.newBookMarkName!="")
                {
                    newInserRecord={
                        "cmd":"ClientApplyInsertBookMarkInfo",
                        "BookMarkID":this.BookMarksList.length+1,
                        "BookMarkName":this.newBookMarkName,
                        "BookMarkLink":this.newBookMarkLink,
                        "BookMarkDirID":'2'
                    };
                }
            },
            addNewDir: function () {
                var newInserRecord;
                if (this.newDirName != "") {
                    newInserRecord = {
                        "cmd": "ClientApplyInsertDirInfo",
                        "DirID": this.DirItems.length+1,
                        "DirName": this.newDirName,
                        "ParentDirID": "1"
                    }
                    this.sendJson(newInserRecord);
                }
                this.clearAddDirData();
            },
            onSelectRootDir: function (e) {

            },
            debugInit:function () {
                this.DirItems.push({name: "根目录",id:1,parentid:0,ItemSelected: "false"});
                this.DirItems.push({name: "购房",id:2,parentid:1,ItemSelected: "false"});
                this.DirItems.push({name: "工具",id:3,parentid:1,ItemSelected: "false"});
                this.DirItems.push({name: "前端",id:4,parentid:1,ItemSelected: "false"});

            },
            loadBookMarkInfo:function (record) {
              var newRecord = {
                  BookMarkID:record.BookMarkID,
                  name:record.BookMarkName,
                  link:record.BookMarkLink,
                  parentID:record.BookMarkDirID
              };
              this.BookMarksList.push(newRecord);
            },
            loadDirInfo: function (record) {

                var newRecord = {
                    name: record.DirName,
                    id: record.DirID,
                    parentid: record.ParentDirID,
                    ItemSelected: "false"
                };
                this.DirItems.push(newRecord);
            },
            clearAddDirData: function () {
                var i = 0;
                for (i = 0; i < this.DirItems.length; i++) {
                    this.DirItems[i].ItemSelected = "false";
                }
                this.selectedParentDir = "Root";
                this.newDirName = "";
            },
            onSelectParentDir: function (e) {
                var parentNode = e.target.parentNode;
                var i = 0;
                var selectedIdex = 0;
                for (i = 0; i < parentNode.childNodes.length; i++) {
                    if (e.target.innerText == parentNode.childNodes[i].innerText) {
                        selectedIdex = i;
                    }

                }
                this.clearAddDirData();
                this.selectedParentDir = this.DirItems[selectedIdex].name;

            },
            sendJson: function (JsonRecord) {
                var newSendRecord = JSON.stringify(JsonRecord);
                this.xhttp.open("POST", "bg_db_com.php", true);
                this.xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
                this.xhttp.send(newSendRecord);
            },
            sendQueryDirInfoCmd: function () {
                var record = {
                    "cmd": "ClientQueryDirInfo"
                };
                this.sendJson(record);
            },
            sendQueryBookMarkInfoCmd:function () {
              var record={
                  "cmd":"ClientQueryBookMarkInfo"
              };
              this.sendJson(record);
            },
            parseServerCmd: function (serverJson) {
                var i = 0;
                var record;
                for (i = 0; i < serverJson.length; i++) {
                    record = serverJson[i];
                    if (record.cmd == "ServerResDirInfo") {
                        this.loadDirInfo(record);
                    }
                    else if (record.cmd=="ServerResBookMarkInfo")
                    {
                        this.loadBookMarkInfo(record);
                    }
                }
            }
        }
    }
)
